<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script type="text/javascript" src="js/wxCore.js"></script>
<script type="text/javascript" src="js/layer/layer.js"></script>
<h2 style="text-align: center">小程序功能管理</h2>

<button col-md-4 type="button" id="add_submit" class="btn btn-primary" style="margin: 8px 0 0 0"
        data-toggle="modal" data-target="#addFunModal">
    添加功能
</button>
<button col-md-4 type="button" id="delete_submit" class="btn btn-primary" style="margin: 8px 0 0 0">删&nbsp;除&nbsp;选&nbsp;中</button>
<form action="javascript:void(0)" id="tabForm" method="post">
    <table class="table table-hover">
        <thead>
        <tr>
            <th><input id="checkboxs" type="checkbox"></th>
            <th>编&nbsp;号</th>
            <th>图&nbsp;片</th>
            <th>设备名称</th>
            <th>设备描述</th>
            <th>状&nbsp;态</th>
            <th>操&nbsp;作</th>
        </tr>
        </thead>
        <tbody id="RTable">
        <!--<tr>
            <td><input type="checkbox"></td>
            <td>1,001</td>
            <td>Lorem</td>
            <td>ipsum</td>
            <td>dolor</td>
            <td id="tr1">
                <button type="button" class="btn btn-info">修改</button>
                <button type="button" class="btn btn-danger">删除</button>
            </td>
        </tr>-->
        </tbody>
    </table>
</form>

<nav aria-label="Page navigation">
    <div class="page_num_inf" style="float: left">
        <i></i> 共
        <span id="totalPage">0</span> 页 <span id="totalCount">0</span> 条
    </div>
    <ul id="paging" class="pagination">
        <!-- <li>
             <a href="#" aria-label="Previous">
                 <span aria-hidden="true">&laquo;</span>
             </a>
         </li>
         <li class="active"><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li>
             <a href="#" aria-label="Next">
                 <span aria-hidden="true">&raquo;</span>
             </a>
         </li>-->
    </ul>
</nav>

<!-- Modal -->
<div id="modal">
    <%-- 此处是模态框的内容 动态的添加，在js中实现--%>
</div>

<!-- Modal -->
<div id="addModal">
    <div class="modal fade" id="addFunModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel2">小程序添加功能</h4>
                </div>
                <form id="addFunFrom" class="form-horizontal" action='wxfun/addWxfun' method='post'
                      enctype='multipart/form-data'>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="fid" class="col-sm-2 control-label">编号：</label>
                            <div class="col-sm-10">
                                <input type="text" name="fid" class="form-control" id="fid" placeholder="编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="img" class="col-sm-2 control-label">图片：</label>
                            <div class="col-sm-10">
                                <input type="file" name="img" class="form-control" id="img" value="请选择图片">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="drive" class="col-sm-2 control-label">设备名称：</label>
                            <div class="col-sm-10">
                                <input type="text" name="drive" class="form-control" id="drive" placeholder="设备名称">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="description" class="col-sm-2 control-label">设备描述：</label>
                            <div class="col-sm-10">
                                <input type="text" name="description" class="form-control" id="description"
                                       placeholder="设备描述">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <input type="submit" id="addFunSubmit" class="btn btn-primary"></input
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    $("#add_submit").click(function () {
        $("#fid").val("");
        $("#drive").val("");
        $("#description").val("");
        $("#img").val("");
    })
    $("#fid").blur(function (){
        var fid = $("#fid").val();
        $.get("wxfun/findbyFid",{fid:fid},function (data){
            if (data.fid != null){
                //提示层
                layer.msg('设备编号已存在！',{time:4000, icon:5, shift:6});
            }
        })
    })
    $("#addFunSubmit").click(function (){
       var file = $("#addFunFrom").find('input')[1].files[0];
       if (file == null){
           layer.alert("图片不能为空，添加失败！");
           return false;
       }
       var type = file.name.split(".");
       if (type[1] !="jpg" && type[1] !="png"){
            layer.alert("文件类型不是图片，添加失败！");
            return false;
       }
        var fid = $("#fid").val();
        var drive = $("#drive").val();
        var description = $("#description").val();
        if (fid == ''){
            layer.alert("编号为空");
            return false;
        }if (drive == ''){
            layer.alert("设备名称为空");
            return false;
        }if (description == ''){
            layer.alert("设备描述为空");
            return false;
        }
    })
</script>
